<template>
    <div class="Login">
        <div class="bd">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="用户" prop="username">
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-space>
                        <el-input v-model.number="ruleForm.captcha" />
                        <div @click="picture">
                            <img :src="captchaImg" alt="">
                        </div>
                    </el-space>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import {useRouter} from 'vue-router';
// 导入接口
import { captcha, loginApi } from '@/aps/https.js';
const captchaImg = ref('');
const key = ref('');
captcha().then(res => {
    console.log(res);
    captchaImg.value = res.data.img;
    key.value = res.data.key;
})

const picture = () => {
    captcha().then(res => {
        console.log(res);
        captchaImg.value = res.data.img;
        key.value = res.data.key;
    })
}

const ruleFormRef = ref();

const ruleForm = reactive({
    username: '',
    password: '',
    key: '',
    captcha: ''
})
// 验证
const rules = reactive({
    username: [{ required: true, message: '输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '输入密码', trigger: 'blur' }],
    captcha: [{ required: true, message: '输入验证码', trigger: 'blur' }],
})
const router = useRouter()
// 提交
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            ruleForm.key = key.value;
            loginApi(ruleForm).then(res => {
                console.log(res);
                if (res.data.errNo == 0) {
                    localStorage.setItem('jwt', res.data.context.jwt);
                    localStorage.setItem('acl', JSON.stringify(res.data.context.acl));
                    router.push('/dashboard');
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped lang="scss">
.Login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .bd {
        width: 400px;
    }
}
</style>